<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>video 播放</title>
  <link rel="stylesheet" href="font/iconfont.css">
  <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
  <style>
    *{
      padding:0;
      margin:0;
    }
    .vbox{
      position: relative;
      width:100%;
      height:0; 
      padding-top:56.25%;
      background: red;
      overflow: hidden;
    }
    .myvideo , .poster , .playbtn{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    .playbtn{
      display: block;
      font-size: 100px;
      color:#fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 1s;
      top:100%;
    }
    .vbox:hover .playbtn{
      top:0%;
    }
    ul{
      list-style: none;
      background: #161626;
      color:#fff;
    }
    ul li {
      padding:10px;
      margin:5px;
      position: relative;
    }
    .playbar{
      margin-top:20px;
    }
    input[type="range"]{
      appearance: none;  /* 清除浏览器自带的样式  */
    }
    input[type=range]{
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;   
        appearance: none;
        height:6px;
        border:none;
        outline: none;
        background:-webkit-linear-gradient(top,#666 0%, #666 50%, #666 100%);
        border-radius: 10px;
    }
    input[type=range]::-webkit-slider-thumb{
        -webkit-appearance: none;  
        width: 14px;
        height:14px;
        border-radius: 50%;
        background: #fff;
        margin-top: -1px;
        margin-left:-2px;
        border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
        box-shadow: 0 0 .125em #3b4547; /*添加底部阴影*/
        z-index:1000;
    }
    .playcol{
      pointer-events: none;
      height:6px;
      background:#fff;
      /* width:50%; */
      border-radius: 10px;
      position: absolute;
      left:10px;
      top:20px;
    }
    #playrange{
      width:90%;
      
    }
  </style>
</head>
<body>
  <div class="vbox">
    <video 
      src="http://47.104.209.44/mp/brkw_back.mp4" 
      class="myvideo"
      id="myvideo"
      controls
      loop
      preload 
    ></video>
    <img src="http://47.104.209.44/base/imgs/1.jpg" alt="" class="poster">
    <i class="iconfont icon-play playbtn"> </i>
  </div>
  <div class="playbar">
    <ul>
      <li>
        <i class="iconfont icon-play playtoggle"></i>
      </li>
      <li>
        <span class="cmin">00</span>:
        <span class="csec">00</span>
        <span>/</span>
        <span class="dmin">00</span>: 
        <span class="dsec">00</span>
      </li>
      <li>
        <div class="playcol"></div>
        <input id="playrange" type="range" min="0" value="0" step="0.1">
      </li>
      <li>
          <i class="iconfont icon-fullscreen fullscreen"></i>
        </li>

    </ul>
  </div>
      <script>
        const v = document.getElementById("myvideo")
        const owidth = $("#playrange").width()
        console.log(owidth)
        // w/currentTime = owidth/duration => w =  owidth/duration  *  currentTime
        // 点击进入全屏
        $(".fullscreen").on("click",function(){
          if(v.webkitRequestFullScreen){
            v.webkitRequestFullScreen()
          }else if(v.mozRequestFullScreen){
            v.mozRequestFullScreen()
          }else if(v.msRequestFullScreen){
            v.msRequestFullScreen()
          }else{
            v.requestFullScreen()
          }
        })

        $(".playbtn").click(function(){
           v.play();
        })

        $(".playtoggle").click(()=>{
          v.paused?v.play():v.pause()
        })

        v.addEventListener("play",function(){
           $(".poster").hide()
           $(".playbtn").hide()
           $(".playtoggle").addClass("icon-pause").removeClass('icon-play')
        })

        v.addEventListener("pause",function(){
          $(".poster").show()
           $(".playbtn").show()
           $(".playtoggle").removeClass("icon-pause").addClass('icon-play')
        })

        $("#playrange").on("change",function(){
          currentTime = $(this).val()
          v.currentTime = currentTime;
        })
        
        var duration = 0;
        var volume = 0
        var currentTime = 0;
        v.addEventListener("loadedmetadata",function(){
          duration = v.duration;
          volume = v.volume
          currentTime = v.currentTime;
          console.log(duration)
          $("#playrange").attr("max",Math.floor(duration));
          $(".dmin").html(parseInt(duration/60))
          $(".dsec").html(parseInt(duration%60))
        })

        v.addEventListener("timeupdate",function(){
          currentTime = v.currentTime;
          $(".cmin").html(parseInt(currentTime/60))
          $(".csec").html(parseInt(currentTime%60))
          $(".playcol").css("width",owidth/duration * currentTime)

        })

        v.addEventListener("volumechange",function(){
            
        })

         v.addEventListener("ratechange",function(){
            
         })

         v.addEventListener("ended",function(){
              console.log("播放结束")
          })
      </script>

</body>
</html>